import Taro, { Component } from '@tarojs/taro'
import { connect } from '@tarojs/redux'
import { View, ScrollView, Picker, Button } from '@tarojs/components'
import './index.less'
import { AtSearchBar, AtIcon, AtDrawer, AtTag } from 'taro-ui'
var timer_set;
@connect(({ companyList, companyDetail, loading }) => ({
  companyList,
  companyDetail,
  loading
}))

export default class companyList extends Component {

  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
  }

  componentDidMount() {
    const { dispatch } = this.props;
    // 数据初始化
    dispatch({ type: 'companyList/initData' })
    dispatch({ type: 'companyList/loadType' })
    dispatch({ type: 'companyList/loadList' })
  }

  // 下拉滚动
  onScrollToLower(e) {
    const {
      companyList, dispatch
    } = this.props;
    const {
      offset, total, listData
    } = companyList;

    dispatch({
      type: 'companyList/loadList',
      payload: {
        offset: listData.length
      }
    })

    // if(listData.length < total){
    //     dispatch({
    //         type : 'companyList/loadList',
    //         payload : {
    //             offset: offset + 1
    //         }
    //     })
    //     dispatch({
    //         type : 'companyList/updateState',
    //         payload : {
    //             offset: offset + 1
    //         }
    //     })
    // }
  }

  choseListData(item) {
    const { dispatch } = this.props;
    dispatch({ type: 'companyDetail/initData' })
    dispatch({
      type: 'companyDetail/updateState',
      payload: {
        id: item.id
      }
    })
    Taro.navigateTo({
      url: `/pages/companyDetail/index`
    })
  }

  getData(e) {
    const t = this;
    const { dispatch } = t.props;
    dispatch({
      type: 'companyList/updateState',
      payload: {
        name: e
      }
    })
    if (timer_set) {
      clearTimeout(timer_set)
    }
    timer_set = setTimeout(() => {
      dispatch({
        type: 'companyList/updateState',
        payload: {
          offset: 0,
          total: 0, // 总数
          listData: [], // 列表
        }
      })
      dispatch({
        type: 'companyList/loadList',
        payload: {
          name: e,
          offset: 0,
        }
      })
    }, 500)
  }

  changeType(item) {
    const t = this;
    const { companyList, dispatch } = t.props;
    const {
      choseType, showDrawer
    } = companyList;
    const updateState = (obj) => {
      dispatch({
        type: 'companyList/updateState',
        payload: {
          ...obj
        }
      })
    }
    dispatch({
      type: 'companyList/updateState',
      payload: {
        typeId: item.id,
      }
    })
    dispatch({
      type: 'companyList/updateState',
      payload: {
        listData: []
      }
    })
    dispatch({ type: 'companyList/loadList' })
    updateState({ showDrawer: false })
  }


  render() {
    const {
      companyList, dispatch
    } = this.props;
    const {
      name, typeId, listData, choseType, showDrawer
    } = companyList;
    const updateState = (obj) => {
      dispatch({
        type: 'companyList/updateState',
        payload: {
          ...obj
        }
      })
    }

    return (
      <View className='companySearch'>
        <View className='choseList'>
          <View className='search'>
            <AtSearchBar
              placeholder='搜索公司名或行业'
              actionName='取消'
              value={name}
              onChange={this.getData.bind(this)}
              onActionClick={() => {
                dispatch({
                  type: 'companyList/updateState',
                  payload: {
                    name: '',
                    listData: [], // 列表数据
                    limit: 8,
                    offset: 0,
                    total: 0, // 总数
                  }
                })
                dispatch({
                  type: 'companyList/loadList',
                  payload: {
                    name: '',
                    offset: 0,
                  }
                })
              }}
            />
          </View>
        </View>
        <View className="choseTypeBox">
          <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
            {choseType.slice(0, 4).map((item, i) => <View className='choseType'>
              <View className={`${typeId === item.id ? 'choseChildOn' : 'choseChild'}`}
                onClick={this.changeType.bind(this, item)}
              >{item.name}</View>
            </View>)
            }
            <View className='choseType'>
              <View className='choseChild' onClick={() => {
                updateState({ showDrawer: true })
              }}>更多</View>
            </View>
          </scroll-view>
        </View>
        <AtDrawer
          show={showDrawer}
          right
          mask
          onClose={() => {
            updateState({ showDrawer: false })
          }}
        >
          {/* <AtList>
            {choseType.slice(4, choseType.length - 1).map((item, i) =>
              <AtListItem title={item.name} extraText={item.name}/>
              // <AtListItem title={item.name} onClick={this.changeType.bind(this, item)} />
            )
            }
          </AtList> */}
          {choseType.slice(1, choseType.length - 1).map((item, i) => <AtTag
            name='tag-1'
            type='primary'
            circle
            onClick={this.changeType.bind(this, item)}
          >{item.name}</AtTag>
          )}
        </AtDrawer>
        <View className='companyList'>
          <ScrollView
            scrollY
            onScrollToLower={this.onScrollToLower.bind(this)}
            style="height:100%"
          >
            {
              listData.map((item, i) => <View className='listChild' key={i}
                onClick={this.choseListData.bind(this, item)}
              >
                <View className='box_left'>
                  <image src={item.topImage.split(',http')[0]} />
                </View>
                <View className='box_right'>
                  <View className='childName'>
                    {item.businessName || ''}
                  </View>
                  <View className='childText'>
                    {item.location || ''}
                  </View>
                </View>
                <View className='main'>主营产品：{item.businessContent}</View>
              </View>)
            }
          </ScrollView>
        </View>
      </View>
    )
  }
}
